
<head>
<style type="text/css">
.style1 {
	border-collapse: collapse;
	border: 3px solid #74A824;
}
.style2 {
	border: 1px solid #74A824;
  text-align: center;
}
.style3 {
	border: 1px solid #74A824;
}
.style4 {
	font-size: medium;
}
.style5 {
	font-size: medium;
}
</style>
</head>

<table style="width: 100%" align="center" class="style1">
		<tr>
			<td style="width: 212px; height: 78px;" class="style2"><div class="contentheading2">Zone</div></td>
			<td style="height: 78px;" class="style2" ><div class="contentheading2">Progress</div></td>
			<td style="height: 78px;" class="style2" ><div class="contentheading2">Totals</div></td>
		</tr>
  <?$x=0; foreach($zones as $zones=>$v):?>
  <? $percent = 2; $progwidth = 0; $zid = getZoneID($v['short_name']);?>
  <?if($v['quests'] > 0): $percent = round(($v['completed']/$v['quests'])*100);
  $progwidth = round($percent * 2);?>
  <?endif;?>

    		<tr>
        <td style="width: 212px" class="style2">
          <DIV style="PADDING-RIGHT: 2px; FLOAT: left; WIDTH: 198px; POSITION: relative"><div><a href="index.php?editor=exp&z=<?=$zid?>&action=2">
            <?=$v['short_name']?></a></div>
          </DIV>
        </td>
        <td style="width: 200px" class="style3" >
          <div style="height:20px;width:200px;background-image:url('images/art/progress.gif');">
			
		  <div style="width:<?=$progwidth?>px;overflow:hidden"><img src="images/art/<? if ($percent < 30): echo 'red'; elseif (($percent >=30 && $percent<=80)):  echo 'yellow'; else: echo 'green'?><?endif;?>.gif"></div>
		</div></td>
		<td style="width: 200px" class="style2" >
      <div>(<?=$v['completed']?>/<?=$v['quests']?>)</div> </td>
		</tr>

    <?$x++; endforeach;?>

		</table>
